<template>
  <div class="big">
      <div class="border"></div>
      <div class="name" v-if="userInfo">
          尊敬的{{}}&nbsp;{{userInfo.username}}&nbsp;你好
      </div>
    <div class="mine"  v-if="userInfo">
      <h2>个人中心</h2>
      <span></span>
      <div class="pic">
        <Avatar></Avatar>
      </div>
      <div v-if="roleList" class="ml10">
          {{roleList.find((item) => item.value == userInfo.role).label}}
      </div>
    </div>
    <div class="right">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="个人信息" name="first"><First></First></el-tab-pane>
                    <el-tab-pane label="修改密码" name="second"><Second></Second></el-tab-pane>
                </el-tabs>
    </div>
  </div>
</template>


<script>
import { reactive, computed, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useStore } from "vuex";
import Avatar from "../../components/Avatar.vue";
import First from "../../components/first.vue";
import Second from "../../components/second.vue";
import { roleList } from "@/utils"
export default {
  components: {
    Avatar,
    Second,
    First
  },
  setup() {
    const state = reactive({
        activeName:"first",
        roleList
    });
    const store = useStore();
    const userInfo = computed(() => store.state.userInfo);
    onMounted(() => {
      console.log(userInfo);
    });
    return {
      userInfo,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.border{
    position:absolute;
    width: 260px;
    height: 120px;
    // background-color: aqua;
    top: 275px;
    left: 20px;
    opacity: 1;
    border: 2px solid #14c5c5;
    border-top: none;
    z-index: -10;
    border-radius: 5px;
}
.name{
    position:absolute;
    top: 50px;
    left: 70px;
}
.right {
  flex: 1;
//   background-color: aquamarine;
  padding: 20px;
  border-radius: 20px;
  border: 2px solid #ccc;
}
.big {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.mine {
  width: 300px;
  height: 100%;
  //   background-color: ;
  padding: 20px;
  margin-top: 200px;
  span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: rgb(20, 197, 197);
    margin-top: 20px;
  }
}
.pic {
  margin-left: 100px;
  margin-top: 20px;
}
.ml10{
    margin-left: 90px;
    margin-top: 30px;
}
</style>